<template>
  <div id="bbt">
    <div class="top">
         
    </div>

    <div class="list">
        <div class="title">
             <span @click="doing()">正在抢购</span>
             <span @click="done()">上新预告</span>
        </div>
        <div class="foot">
            <div v-for="(item,index) in list" :key="index" class="block">

                <div class="picture"><img :src="item.picture" alt=""></div>
                <div class="right">
                    <div>{{item.title}}</div>
                    <div class="two">售价：{{item.min_price}}</div>
                    <button @click="changeclick(item,index)">{{item.msq?"已抢":"马上抢"}}</button>
                </div>
            </div>

        </div>
    </div>
  </div>
     
</template>

<script>
// var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240950&t=a5e75c663474fbf7b874b9e7a9324adf';

// var pia = 'https://img2.baidu.com/it/u=4289343170,1145786918&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665766800&t=76db48fba28ca19707196d20461958cb';

// var pis = 'https://img2.baidu.com/it/u=1309682942,3174268086&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665766800&t=f3ecd65e7a098e8578dcce656ce892da'

import {tuan_list} from  '../utils/api'
export default {
    data(){
         return{
             list1:[],
             list:[],
             Arr:[]
            //  Arr:["正在抢购","上新预告"],
            //  list:[
            //      {image:pic,title:"汉堡王： 买一送一",value:20,msq:false},
            //      {image:pic,title:"华莱士人气套餐 买一送一",value:12,msq:false},
            //      {image:pic,title:"kfc 买一送5",value:23,msq:false}
            //  ],
            //  Arr:[
            //      {image:pia,title:"面皮 ",value:20,msq:false},
            //      {image:pia,title:"面包",value:12,msq:false},
            //      {image:pia,title:"火腿肠",value:23,msq:false}
            //  ],
            //  Arr2:[
            //      {image:pis,title:"德克士    100-2",value:20,msq:false},
            //      {image:pis,title:"大大大大大大猪肉",value:12,msq:false},
            //      {image:pis,title:"麻辣拌",value:23,msq:false}
            //  ],



         }
     },
     mounted(){
        tuan_list({status:0}).then((res)=>{
            this.list = res.data.list;
            console.log(res)
        })
        tuan_list({status:0}).then((res)=>{
            this.list1 = res.data.list;
            console.log(res)
        })

        tuan_list({status:1}).then((res)=>{
            this.Arr = res.data.list;
            console.log(res)
        })
     },
     methods:{
        changeclick(item,index){
              item.msq = true
        },
        doing(){
            //  this.list(0) = this.Arr
            this.list = this.list1
        },
        done(){
            // this.status=1
            // this.list(1)= this.Arr
            this.list = this.Arr
        }

     }
}
</script>

<style>
    *{
    margin: 0;
    padding: 0;
}
    .top{
        width: 100%;
        height: 150px;
        background-image: url(../pic.png);
        background-size:contain ;
       margin: auto;
    }

    .title span{
       display: inline-block;
       padding: 10px;
       color: red;
   }

   .block{
       width: 100%;
       height: 100px ;
       display: flex;
       margin: 10px 0;
       margin-bottom: 20px;
   }
   .block img{
       width: 100px;
   }

   .right{
       padding-left: 30px;
   }

   .foot button{
       background-color: rgb(188, 12, 12);
       width: 60px;
       height: 30px;
       color: aliceblue;
       font-weight: 800;
       border-radius: 10px;
       margin-top: 30px;
       margin-left: 60px;
   }
.right .two{
    display: inline-block;
    /* margin-left: 0px; */
}
 

</style>